import Column from "antd/es/table/Column"
import { HtmlProps } from "next/dist/shared/lib/html-context.shared-runtime"
import { ReactNode, TableHTMLAttributes } from "react"


type TableProps = {
    columns: {
        key: string;
        label: ReactNode;
    }[];
    data: {
        cells: { key: string, label: ReactNode }[]
    }[];
}

export default function UiTable({ columns, data, ...props }: TableProps) {
    return (
        <>
            <table className='table-auto border-collapse w-full'{...props}>
                <thead>
                    <tr>
                        {columns.map((column) => (
                            <th key={column.key} className="border border-gray-300 px-4 py-2">
                                {column.label}
                            </th>
                        ))}
                    </tr>
                </thead>
                <tbody>
                    {data.map((row, index) => (
                        <tr key={index}>
                            {columns.map((column) => (
                                <td key={column.key} className="border border-gray-300 px-4 py-2">
                                    {row.cells.find((cell)=>cell.key==column.key)?.label}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        </>
    );
}